<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
 
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!--<h1>El Grapho Network Hairball Graph</h1> -->
    <div id="container"></div>

    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
let NUM_NODES = 20000;

let model = {
  nodes: [],
  edges: []
};

for (let n=0; n<NUM_NODES; n++) {
  model.nodes.push({
    group: Math.round(Math.random() * 7)
  });

  model.edges.push({
    from: n,
    to: Math.floor(Math.random() * (NUM_NODES - 1))
  });
}

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.Hairball(model),
  debug: false,
  nodeSize: 0.02,
  edgeSize: 1,
  fillContainer: true,
  darkMode: true,
  glowBlend: 0.5,
  nodeOutline: false
});
    </script>
  </body>
</html>